var lis1 = document.querySelector('.shao-rm-content')
var str = ''
data.forEach(itme => {
    str += `
    <li><a href="#">${itme}</a></li>
    `
    lis1.innerHTML = str
});

var kuang = document.querySelector('.shao-lb-content')
var imgs1 = document.querySelectorAll('.shao-lb-content img')
var text1 = document.querySelectorAll('.shao-lb-bottom-text-c')
var span1 = document.querySelectorAll('.shao-lb-bottom-img span')
var ul1 = document.querySelector('.shao-lb-bottom-img')
var li2 = document.querySelectorAll('.shao-lb-bottom-img li')

var index1 = 0



function move() {
    for (var i = 0; i < imgs1.length; i++) {
        imgs1[i].classList.remove('active')
        text1[i].classList.remove('active')
        span1[i].classList.remove('active')
        span1[i].classList.remove('active')
    }
}




function jg() {
    imgs1[index1].classList.add('active')
    text1[index1].classList.add('active')
    span1[index1].classList.add('active')
    span1[index1].classList.add('active')
}


var timer = setInterval(function () {
    move()
    index1++
    if (index1 == 4) {
        index1 = 0
    }
    jg()
}, 2000)



ul1.onmouseover = function (e) {
    // for(var i=0;i<span1.length;i++){
    //     span1[i].classList.remove('active')

    // }
    move()
    if (e.target.localName == 'span') {
        index1 = e.target.dataset.f
        // span1[e.target.dataset.f].classList.add('active')
        jg()
    }
}
kuang.onmouseenter = function () {

    clearInterval(timer)
}






kuang.onmouseleave = function () {
    timer = setInterval(function () {
        move()
        index1++
        if (index1 == 4) {
            index1 = 0
        }
        jg()
    }, 2000)

}

var ul2 = document.querySelectorAll('.shao-top-libao-content-text')

var str2 = '',str3 = '',str4 = '',str5 = '',str6 = '',str7= ''

function fengzhuang(data, q,str) {
    data.forEach(itme => {
        str += `
       <li data-t="${itme.num - 1}">
             <div class="shao-yincang">
                 <span class="shao-num">${itme.num}</span>
                 <a class="shao-title" href="#">${itme.title}</a>
                 <span class="shao-ling"></span>
             </div>
             
             <div class="shao-xt">
                 <a href="#">
                     <span class="shao-num2">${itme.num}</span>
                     <div class="shao-xt-img">
                         <img src="${itme.img}" alt="">
                         <span></span>
                     </div>
                     <div class="shao-xt-text">
                         <p>${itme.title}</p>
                         <span>领号</span>
                     </div>
                 </a>
             </div>
        </li>
       `
        ul2[q].innerHTML = str
    })
}
fengzhuang(data2, 0,str2)
fengzhuang(data3, 1,str3)
fengzhuang(data4, 2,str4)
fengzhuang(data5, 3,str5)
fengzhuang(data6, 4,str6)
fengzhuang(data7, 5,str7)


    var lis2 = ul2[0].querySelectorAll('li')
    lis2[0].classList.add('active')


    var lis3 = ul2[1].querySelectorAll('li')
    lis3[0].classList.add('active')

    var lis4 = ul2[2].querySelectorAll('li')
    lis4[0].classList.add('active')

    var lis5 = ul2[3].querySelectorAll('li')
    lis5[0].classList.add('active')

    var lis6 = ul2[4].querySelectorAll('li')
    lis6[0].classList.add('active')

    var lis7 = ul2[5].querySelectorAll('li')
    lis7[0].classList.add('active')


function fengzhuang2(i, data ,lis) {


    ul2[i].onmouseover = function (e) {
        if (e.target.localName == 'li') {
            for (var i = 0; i < data.length; i++) {
                lis[i].classList.remove('active')
            }
            lis[e.target.dataset.t].classList.add('active')
        }
    }
}


fengzhuang2(0, data2,lis2)
fengzhuang2(1, data3,lis3)
fengzhuang2(2, data4,lis4)
fengzhuang2(3, data5,lis5)
fengzhuang2(4, data6,lis6)
fengzhuang2(5, data7,lis7)


var tbody=document.querySelector('.shao-r-list')
var str8=''

data8.forEach(itme => {
    str8 += `
    <tr class="shao-game">
    <td class="shao-game-name">
        <div>${itme.name}</div>
    </td>
    <td class="shao-game-time"> ${itme.time}</td>
    <td class="shao-lh">
        <a href="#">领号</a>
    </td>
</tr>
   `
   tbody.innerHTML = str8
})

var bb=document.querySelector('.shao-bb-content-list')
var str9=''

data9.forEach(itme => {
    str9 += `
    <li>
    <div class="shao-bb-content-list-top qingchu">
        <p>${itme.name}
            <span>领取了</span>
        </p>
        <span>刚刚</span>
    </div>
    <div class="shao-bb-content-list-bottom qingchu">
        <a href="#">${itme.lb}</a>
        <a href="#">我也要</a>
    </div>
</li>
   `
   bb.innerHTML = str9
})

var cuo=document.querySelector('.cuo')
var ewm=document.querySelector('.ewm')
cuo.onclick=function(){
    ewm.classList.add('active')
    cuo.classList.add('active')
}
var fh=document.querySelector('.shao-fh')
var fhdb=document.querySelector('.shao-fhdb')

window.onscroll=function(){
    var top=window.scrollTop || document.documentElement.scrollTop||document.body.scrollTop;// 获取页面的滚动高度 兼容不同浏览器的写法
  
    if(top>170){
        fh.classList.add('active')
        
    }else if(top<170){
        fh.classList.remove('active')
    }
   
}
